<template>


    <div class="zongjian">
      <div class="shenqing">申请成为讲师</div>
      <div class="ziduan">

        <span class="qd1">签订协议1</span>
        <span class="qd2">签订协议2</span>
        <span class="qd3">签订协议3</span>

      </div>
      <el-form >
        <el-form style="margin: 15% 0 0 9%">
          <span>手机号:</span>
          <input  placeholder="请输入手机号" class="yanzhengma_input" v-model="tPhone" ></input>

        </el-form><br><br>
        <el-form style="margin: 0 0 0 6%">
          <span>图像验证码:</span>
          <input  class="yanzhengma_input" v-model="picLyanzhengma" placeholder="请输入验证码"></input>
          <input type="button"  @click="createCode()"  class="verification" v-model="checkCode"/>
        </el-form>
          <button style="height: 46px" class="aaa" @click="nextt()">提交</button>
      </el-form>


    </div>


</template>

<script>
  import apply3 from  "@/components/teacherfront/apply3"
  export default {

    data(){
      return{
        picLyanzhengma:'',
        checkCode:'',
        tPhone: '',

      }
    },


    methods:{
      // 图片验证码
      createCode(){
        //先清空验证码的输入
        this.code = "";
        this.checkCode = "";
        this.picLyanzhengma = "";
        //验证码的长度
        var codeLength = 4;
        //随机数
        var random = new Array(0,1,2,3,4,5,6,7,8,9/*,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'*/);
        for(var i = 0; i < codeLength; i++) {
          //取得随机数的索引（0~35）
          var index = Math.floor(Math.random()*10);
          //根据索引取得随机数加到code上
          this.code += random[index];
        }
        //把code值赋给验证码
        this.checkCode = this.code;
      },
      nextt(){

        if (this.tPhone === '') {
          this.$alert('请输入手机号', '提示', {
            confirmButtonText: '确定',
          });
        } else {
          if (!/^((1[3,5,8,7,9][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/.test(this.tPhone)) {
            this.$alert('请输入正确手机号', '提示', {
              confirmButtonText: '确定',

            });
          }else{
            this.$axios.get("http://localhost:8061/list/teacher/sephone?tPhone="+this.tPhone).then(r=>{
             if (r.data.obj==1){
                  this.$message.error("账号已经存在")
                  this.$router.push({
                    path:'/Txzl'
                  })
             }
            })
          } if (this.picLyanzhengma===''){
            this.$alert('请输入图形验证码', '提示', {
              confirmButtonText: '确定',
            });
          }else  if (this.picLyanzhengma!=this.checkCode){
            this.$alert('请输入正确图形验证码', '提示', {
              confirmButtonText: '确定',
            });
          }else {
            //验证通过 反转页面
            this.$router.push({
              path:'/apply3',query:{
                tPhone:this.tPhone
              }
            })
          }
        }

      },
    },
    created(){
      this.createCode();
    }
    //手机号  验证码验证

  }
</script>

<style scoped>
  .zongjian{
    width: 1000px;
    margin-left: 300px;
  }
  .shenqing{
    border-radius: 8px 8px 0 0;
    height: 80px;
    line-height: 80px;
    background: #e4e4e4;
    font-size: 18px;
    text-align: center;
    color: #333;
  }
  .ziduan{
    width: 1000px;
    margin: 0 auto;
  }
  .qd1{
    display: inline-block;
    line-height: 30px;
    color: #999;
    font-size: 13px;
    width: 330px;
    margin: 30px 1px;
    background: #f2f2f2;
    text-align: center;
    background: #09f;
    color: #fff;
  }
  .qd2{
    display: inline-block;
    line-height: 30px;
   /* color: #999;*/
    font-size: 13px;
    width: 330px;
    margin: 30px 1px;
    background: #f2f2f2;
    text-align: center;
    background: #09f;
    color: #fff;
  }
  .qd3{
    display: inline-block;
    line-height: 30px;
    color: #999;
    font-size: 13px;
    width: 320px;
    margin: 30px 1px;
    background: #f2f2f2;
    text-align: center;
  }
  .yanzhengma_input{
    font-family: 'Exo 2', sans-serif;
    border: 1px solid #fff;
    outline: none;
    border-radius: 10px;
    letter-spacing: 1px;
    font-size: 17px;
    font-weight: normal;
    padding: 5px 0 5px 10px;
    margin-left: 30px;
    width: 310px;
    height: 30px;
    margin-top: 20px;
    border: 1px solid #e6e6e6;
  }
  .aaa{
    display: inline-block;
    width: 320px;
    line-height: 46px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    background: #d51423;
    border-radius: 6px;
    position: relative;
    left: 50%;
    margin-left: -160px;
    margin-top: 30px;
    border: none;
  }
  .verification{
    border-radius: 12px;
    width:100px;
    letter-spacing:5px;
    margin-left: 50px;
    height: 40px;
    transform: translate(-15px,0);
  }


</style>
